<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script src="../../../lib/vue.global.js"></script>

</head>
<body>

<div id="app">


    <h1>jquery版本</h1>
    <hr>
    <ul id="list">

    </ul>

    <hr>
    <h1>vue版本</h1>
    <hr>
    <ul>
        <li v-for="(emp,index) in employees" class="cls">{{index+1}}.{{emp.name}}</li>
    </ul>


    <select>
        <option v-for="emp in employees"  :value="emp.id">{{emp.name}}</option>
    </select>
</div>

</body>
<script src="../../../lib/jquery.js"></script>
<script src="../../../lib/vue.global.js"></script>
<script>

    /**
     *   1. ul /ol   -- li
     *   2. select   -- option
     *   3. table    --  tr 、td（对象循环）
     *   4. radio/checkbox
     * */
    employees = [
        {
            id: 1,
            name: 'L',
            age: 34
        }, {
            id: 2,
            name: 'M',
            age: 45
        }, {
            id: 3,
            name: 'N',
            age: 56
        }
    ];


    function initUL() {

        for (let i = 0; i < employees.length; i++) {
            const listItem = $('<li></li>').text(employees[i].name);//dom model -- 抽象
            $('#list').append(listItem)
        }
    }

    initUL();


    const app = {

        data() {
            return {
                employees: employees
            }
        }
    }


    Vue.createApp(app).mount('#app');

</script>

</html>